<template>
    <div class="main_top">
        <ul>
            <li :class="(i == '0' ? 'allInOneList2' : 'allInOneList1')" v-for="(item, i) in allinoneList"
                :key="item.id">
                {{ item.name }}</li>
        </ul>
        <div class="ys_box">
            <div class="ysList">
                <div class="card">
                    <div class="btImg_bg">温度</div>
                    <div id="chart"></div>
                </div>
            </div>
            <div class="ysList">
                <div class="card">
                    <div class="btImg_bg">温度</div>
                    <div id="chart"></div>
                </div>
            </div>
            <div class="ysList">
                <div class="card">
                    <div class="btImg_bg">温度</div>
                    <div id="chart"></div>
                </div>
            </div>
            <div class="ysList">
                <div class="card">
                    <div class="btImg_bg">温度</div>
                    <div id="chart"></div>
                </div>
            </div>
            <div class="ysList">
                <div class="card">
                    <div class="btImg_bg">温度</div>
                    <div id="chart"></div>
                </div>
            </div>
            <div class="ysList">
                <div class="card">
                    <div class="btImg_bg">温度</div>
                    <div id="chart"></div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    data() {
        return {
            allinoneList: [
                { name: '手术室多合一', id: 1 },
                { name: '医院大厅多合一', id: 2 },
                { name: '住院楼一层', id: 3 },
            ],
        }
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));
        // 指定图表的配置项和数据axisLine.lineStyle.color
        var option = {
            // color:['#ffffff'],
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%',
                backgroundColor: 'rgba(50,50,50,0.7)',
                borderColor: 'rgba(50,50,50,0)',
                textStyle: {
                    color: '#fff'
                },
            },
            series: [
                {
                    center: ["50%", "50%"],
                    radius: "80%",
                    clockwise: true,
                    min: 0,
                    max: 100,
                    splitNumber: 4,
                    title: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                    },
                    axisLabel: {
                        show: true,
                        color: "#fff"
                    },
                    axisTick: {
                        lineStyle: {
                            color: "#fff"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#fff"
                        }
                    },
                    progress: {
                        width:10,
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 1,
                                y: 0,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0, color: '#FF002A' // 0% 处的颜色
                                    }, {
                                        offset: 0.2, color: '#FF7924'
                                    }, {
                                        offset: 0.4, color: '#F5DD38'
                                    }, {
                                        offset: 0.6, color: '#53FF7E'
                                    }, {
                                        offset: 0.8, color: '#00EFD7'
                                    }, {
                                        offset: 1, color: '#009BE6' // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            }
                        },
                        show: true
                    },
                    name: 'Pressure',
                    type: 'gauge',
                    detail: {
                        valueAnimation: true,
                        formatter: '{value}'
                    },
                    data: [
                        {
                            value: 80,
                            name: 'SCORE',
                            detail: {
                                show: true,
                                color: "#fff"
                            },
                            itemStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 1,
                                    x2: 0,
                                    y2: 0,
                                    colorStops: [
                                        {
                                            offset: 0, color: '#FF002A' // 0% 处的颜色
                                        }, {
                                            offset: 0.2, color: '#FF7924'
                                        }, {
                                            offset: 0.4, color: '#F5DD38'
                                        }, {
                                            offset: 0.6, color: '#53FF7E'
                                        }, {
                                            offset: 0.8, color: '#00EFD7'
                                        }, {
                                            offset: 1, color: '#009BE6' // 100% 处的颜色
                                        }
                                    ],
                                    global: false // 缺省为 false
                                }
                            },
                        }
                    ]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        window.addEventListener("resize", () => myChart.resize());

    },
}
</script>

<style lang="less">
.main_top {
    margin-top: 0.25rem;

    ul {
        display: flex;
        justify-content: center;

        .allInOneList1 {
            margin: 0 0.25rem;
            width: 3.5375rem;
            height: 32px;
            background: linear-gradient(270deg, rgba(204, 204, 204, 0) 0%, rgba(204, 204, 204, 0.66) 50%, rgba(204, 204, 204, 0) 100%);
            text-align: center;
            line-height: 32px;
            font-size: 0.2rem;
            color: #ccc;
        }

        .allInOneList2 {
            margin: 0 0.25rem;
            width: 3.5375rem;
            height: 32px;
            background: linear-gradient(270deg, rgba(244, 213, 35, 0) 0%, rgba(244, 213, 35, 0.66) 50%, rgba(245, 190, 28, 0) 100%);
            text-align: center;
            line-height: 32px;
            font-size: 0.2rem;
            color: #FFAE00;
        }
    }

    .ys_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        height: calc(100vh - 380px);
        margin-top: 16px;
    }

    .ysList {
        width: 32.5%;
        /* 每个元素宽度为100% / 3 */
        height: 50%;
        padding-bottom: 16px;
        box-sizing: border-box;

        .card {
            background: #00319E80;
            width: 100%;
            height: 100%;

            .btImg_bg {
                background: url('../assets/images/title.png') no-repeat center;
                width: 100%;
                height: 30px;
                color: #fff;
                font-size: 16px;
                line-height: 30px;
                font-weight: 600;
                letter-spacing: 1px;
                text-align: center;
            }

            #chart {
                width: 4.25rem;
                height: 100%;
                margin: 0 auto;
            }
        }
    }
}
</style>